 <template>
  <div>
    <!-- {{dataList}} -->
    <el-menu
      background-color="#191a23"
      class="menuBox"
      text-color="#fff"
      :unique-opened="true"
      :default-openeds="defaultOpeneds"
      :default-active="active"
    >
      <template v-for="(v, i) in dataList">
        <el-submenu :index="v.path" v-if="v.children && v.children.length">
          <template slot="title"
            ><i class="el-icon-message"></i>{{ v.title }}</template
          >
          <bods
            v-if="v.children && v.children.length"
            :dataList="v.children"
          ></bods>
        </el-submenu>
        <el-menu-item v-else :index="v.path" @click="toRouterFun(v)">
          <i class="el-icon-message"></i>
          {{ v.title }}
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "bods",
  props: ["dataList"],
  data() {
    return {
      active: "/admin/user/level",
      defaultOpeneds: ["/admin/user"],
    };
  },
  computed: {
    ...mapState("users", ["title"]),
  },
  methods: {
    ...mapActions("users", ["getTagInfoAsync"]),
    toRouterFun(val) {
      this.getTagInfoAsync(val);
      this.$router.push(val.path);
      console.log(val.path);
    },
  },
  watch: {
    //通过title的监听获取到需要高亮的模块
    title(val) {
      this.active = val.path;
      let arr = val.path.split("/");
      this.defaultOpeneds = ["/" + arr[1] + "/" + arr[2]];
    },
  },
  created() {
    this.active = this.$route.path;
    let arr = this.$route.path.split("/");
    this.defaultOpeneds = ["/" + arr[1] + "/" + arr[2]];
  },
};
</script>
<style lang="less" scoped>
</style>
<style>
.menuBox .el-menu-item.is-active {
  background: #2d8cf0 !important;
  color: white !important;
}
</style>